<template>
    <div>
        <el-card class="box-card">
            <template #header>
                <div class="card-header">
                    <span>登录</span>
                </div>
            </template>
            <el-form
                ref="ruleFormRef"
                :model="ruleForm"
                status-icon
                :rules="rules"
                label-width="120px"
                class="demo-ruleForm"
            >
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="ruleForm.username" />
                </el-form-item>
                <el-form-item label="密码" prop="pwd">
                    <el-input
                        v-model="ruleForm.pwd"
                        type="password"
                        autocomplete="off"
                    />
                </el-form-item>
               
                <el-form-item>
                    <el-button type="primary" @click="submitForm(ruleFormRef)"
                        >Submit</el-button
                    >
                    <el-button @click="resetForm(ruleFormRef)">Reset</el-button>
                    <el-button @click="forward">gitee</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>
<script setup>
import { reactive, ref } from "vue";
import {useRouter} from 'vue-router';
import { ElMessage } from "element-plus";
import { getByUsername } from "../service/user";
import { login } from "../service/user";
const ruleFormRef = ref();
const router = useRouter();
const ruleForm = reactive({
    pwd: "",
    username: "",
});


const rules = reactive({
    username: [
        { required: true, message: "用户名不能为空" },
        { pattern: /^\w{5,20}$/, message: "用户名格式不正确" }
    ],
    pwd: [
        { required: true, message: "密码不能为空" },
        { pattern: /^\w{6,}$/, message: "密码格式不正确" }
    ]
});
const submitForm = (formEl) => {
    if (!formEl) return;
    formEl.validate(async (valid) => {
        if (valid) {
            let res = await login(ruleForm);
            if(res.code == 1){
                localStorage.setItem("token",res.data);
                router.push("/manage");
                ElMessage({
                    message: "登录成功",
                    type: "success",
                });
            }else{
                ElMessage.error("用户名或密码错误");
            }
            
        } else {
            ElMessage.error("验证失败");
            return false;
        }
    });
};
const forward = function(){
    location.href = "https://gitee.com/oauth/authorize?client_id=e394b14116e060213fff87d27f7f4643ad61d216631965f0b079913890e79ea3&redirect_uri=http://localhost:3000/api/shop-user/users/redirect&response_type=code";
}
</script>
<style scoped>
.title {
    color: red;
}
.box-card {
    width: 500px;
    margin: auto;
}
</style>
